1import { getCurrentUser, getQuestion } from "@/lib/dal";
2import { cn } from "@/util";
3import { AnswerCard } from "./ui/answer-card";
4import { AnswerForm } from "./ui/answer-form";
5import { AnswersStripe } from "./ui/answers-stripe";
6import { QuestionCard } from "./ui/question-card";
7
8export default async function Page({
9  params,
10}: {
11  params: Promise<{ owner: string; repo: string; number: number }>;
12}) {
13  const { owner, repo, number } = await params;
14  const [user, question] = await Promise.all([
15    getCurrentUser(),
16    getQuestion(owner, repo, number),
17  ]);
18  if (!question) return null;
19
20  const { answers } = question;
21  const hasUserAnswer = answers.find((answer) => answer.author_id === user?.id);
22
23  return (
24    <div className="w-full">
25      <div className="flex flex-col flex-1 min-w-0 pb-20">
26        <div className="max-w-4xl pt-4 border-border border-r">
27          <QuestionCard question={question} owner={owner} repo={repo} />
28        </div>
29
30        <div className="w-full border-border border-b" />
31        <div
32          className={cn(
33            "max-w-4xl border-border border-r",
34            answers.length > 0 && "pb-4",
35          )}
36        >
37          <AnswersStripe count={answers.length} />
38        </div>
39        <div className="flex flex-col max-w-4xl">
40          {answers.length > 0 && (
41            <div className="flex flex-col gap-12 border-border border-r border-b">
42              {answers.map((answer) => (
43                <AnswerCard
44                  key={answer.id}
45                  answer={answer}
46                  owner={owner}
47                  repo={repo}
48                  number={question.number}
49                />
50              ))}
51            </div>
52          )}
53
54          {!hasUserAnswer && (
55            <AnswerForm owner={owner} repo={repo} number={number} />
56          )}
57        </div>
58      </div>
59    </div>
60  );
61}
62